<template>
	<div>
		<van-nav-bar fixed title="商品列表" left-arrow @click-left="$utils.back($route.path)" />
		<div class="has-top has-bottom1" style="height:100vh">
			<!-- 搜索栏 -->
			<top-search type="primary" :val="val" :area-show="areaShow" :input-style="inputStyle" :placeholder="placeholder"
				@search="search" class="top_search" />
			<!-- <svg-icon icon-class="down2" class="fs-32 ml-10"/> -->
			<div class="scrollClass">
				<van-tabs v-model="classActive" @click="tabClick">
					<van-tab v-for="(item, index) in topClassify" :key="item.id" :name="item.id">
						<template #title><img-box class="classImg" :img-url="item.Icon" />
							<div class="fs-22 fs-title text-show-line-1">{{ item.name }}</div>
						</template>
					</van-tab>
				</van-tabs>
				<div class="clickMore" @click.stop="classShow = true">
					<div>展</div>
					<div>开</div><svg-icon icon-class="down2" @goPage="classShow = true" class="fs-28" />
				</div>
			</div>
			<!-- 商品分类及列表栏 -->
			<div class="flex list-content mt-10">
				<!-- 商品分类 -->
				<div class="flex-s-0 scoll-y" v-show="classActive != 0 && classifyList.length > 1">
					<tree :tree-data="classifyList" :active-id="activeId" @treeClickEvent="treeClickEvent" />
				</div>
				<!-- 商品列表 -->
				<div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y">

					<productList :product-list="productList" list-type="quickPlaceOrder" @goDetailPage="goDetailPage"
						@updateCart="updateCart" @showSpec="showSpec" />
					<no-data v-if="productList.length === 0" />
					<p v-if="end === true && productList.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
				</div>
			</div>
		</div>
		<van-popup v-model="classShow" position="top" :get-container="getContainer">
			<div style="background: #fff;">
				<div class="flxedClassify">
					<div class="title">全部分类</div>
					<div class="topClassify topClassifyPop">
						<div v-for="(item, index) in topClassify" :key="item.id" @click="tabClickPop(item.id)"
							:class="{ 'active': classActive == item.id }">
							<img-box class="classImg" :img-url="item.Icon" />
							<span class="fs-22 text-show-line-1">{{ item.name }}</span>
						</div>
					</div>
					<div class="flxedbottom" @click="classShow = false">
						<div style="margin-right: 10rpx;">点击收起</div>
					</div>
				</div>
			</div>
		</van-popup>
		<!-- 底部栏购物车 -->
		<shopCartAccount :car-list="carList" :postType="postType" :storeId="id" @cleanCart="cleanCart"
			@updateCart="carUpdateCart" />
		<!-- 商品详情弹窗 -->
		<van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
			<peoductDetail :detail-data="detailData" :storeId="id" :evaluate-data="evaluateData" @clickLeft="clickLeft"
				@showOpt="showOpt" @changeAddress="changeAddress" />
		</van-popup>

		<!-- 商品规格选择弹窗 -->
		<van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
			<!--<ProductSpec v-show="optPopup.type==='attr'" :storeId="id" :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />-->
			<specTree v-show="optPopup.type === 'attr'" :storeId="id" :data="optPopup.data" :fresh="optPopup.change" :Source="0"
				:switch85="switch85" :switch203="switch203" :switch7="switch7" :popup-type="optPopup.type"
				@closePopup="closePopup" @addCart="addCart" :AddNum="optPopup.data.AddNum" />
		</van-popup>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productList from 'components/productList'
import shopCartAccount from 'components/shopCartAccount'
import peoductDetail from 'components/productDetail'
import ProductSpec from 'components/productDetail/spec'
import tree from 'components/productList/tree'
import { GetStoreProductPage, GetStoreCategory, GetProductTypeTree, GetWholeSaleListForSku, GetUserCarList, GetInintProductDetailInfo, GetCommentListByProduct, AddOrUpdateAmount } from 'api/product'
import { GetReceivingAddressList, AddOrEditUserCarList } from 'api/member'
import { GetBusinessFunction } from 'api/businessSetting'
import specTree from 'components/productDetail/specTree'
export default {
	components: {
		imgBox,
		TopSearch,
		noData,
		productList,
		shopCartAccount,
		peoductDetail,
		ProductSpec,
		tree,
		specTree
	},
	data() {
		return {
			classShow: false,
			classActive: 0,
			// 搜索栏配置及数据
			id: '',
			areaShow: false,
			val: '',
			placeholder: '请输入商品名称',
			inputStyle: 'inputStyle-1',
			displayData: {}, // 整体显示设置
			priceDecimalPlaces: 2,
			sortActiveIndex: 0,

			// 分类栏配置及数据
			activeId: -1,
			topClassify: [],
			classifyList: [],
			initClassify: true, // 是否需要初始化分类

			// 商品列表
			productList: [],
			updateList: true, // 是否需要更新商品列表

			// 购物车数据
			carList: [],

			// 商品详情
			detailData: {},
			oldID: 0,
			detailShow: false,

			detailIndex: -1,
			SpecIndex: -1,

			// 评价数据
			evaluateData: {},

			// 收货地址
			addressList: [],

			// sku 商品规格弹窗
			optPopup: {
				data: {},
				type: '',
				change: false,
				show: false
			},

			cartRequestList: [],

			// 滚动状态
			totalAmout: 0,
			scollRequest: true,
			scollTop: 0,
			end: false,

			// 请求参数
			requestData: {
				ProductType: 1,
				OrderBy: 'AddTime',
				sort: 'desc',
				PageIndex: 1,
				PageSize: 10,
				//NoFutures:'3'
			},

			commentRequest: {
				page: 1,
				size: 3
			},
			lng: 0,
			lat: 0,
			bussinessItem: {},
			postType: null,
			topHeight: null,
			pickUptrue: false,
			address: {},
			switch203: 0,
			switch85: 0,
			switch7: 0, // 微商下单不限制库存
		}
	},
	created() {
		if (this.$route.query.cateId) {
			this.classActive = parseInt(this.$route.query.cateId)
			this.activeId = parseInt(this.$route.query.cateId)
		}
		if (this.$route.query.invit_user_id) {
			localStorage.setItem('invit_user_id', this.$route.query.invit_user_id)
		}
		if (this.$route.query && this.$route.query.lng) {
			const _query = this.$route.query
			this.lng = _query.lng || 0
			this.lat = _query.lat || 0
		} else {
			const _GeolocationData = localStorage.getItem('GeolocationData')
			if (_GeolocationData) { // 存在定位缓存
				const _GeolocationObj = JSON.parse(_GeolocationData)
				if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
					this.lng = _GeolocationObj.center[0]
					this.lat = _GeolocationObj.center[1]
				} else if (_GeolocationObj.position) {
					this.lng = _GeolocationObj.position.lng
					this.lat = _GeolocationObj.position.lat
				}
			}
		}
		this.GetUserCarList()
		this.GetBusinessFunction()
		// this.GetReceivingAddressList()
	},

	mounted() {
		window.onpageshow = (event) => {
			if (event.persisted) window.location.reload();
		};
		this.$nextTick(function () {
			document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
		})

	},
	methods: {
		GetBusinessFunction() {
			GetBusinessFunction(203).then(res => {
				if (res) {
					this.switch203 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(85).then(res => {
				if (res) {
					this.switch85 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(7).then(res => {
				if (res) {
					this.switch7 = res.Data[0].Value;
				}
			})
		},
		tabClick(num) {
			this.classActive = num
			var index = 0
			for (var i = 0; i < this.topClassify.length; i++) {
				if (this.topClassify[i].id === num) {
					index = i
				}
			}
			this.classifyListFn(this.topClassify[index])

		},
		tabClickPop(num) {
			this.classActive = num
			var index = 0
			for (var i = 0; i < this.topClassify.length; i++) {
				if (this.topClassify[i].id === num) {
					index = i
				}
			}
			this.classifyListFn(this.topClassify[index])
			this.classShow = false
		},
		getContainer() {
			return document.querySelector('.scrollClass');
		},
		navigation() {
			this.$utils.back()
			// console.log('导航')
			// console.log(this.bussinessItem)
			// this.$utils.navigation(this.bussinessItem)
		},
		delivery(num) {
			if (this.postType != num) {
				this.postType = num
			}
		},
		goUrl(url) {
			console.log(url)

			window.location.href = url

		},
		// 关键字搜索商品
		search(key) {
			console.log(key)
			this.resetParams()
			this.requestData.search = key
			this.GetWholeSaleListForSku()
		},
		// 获取收货地址
		GetReceivingAddressList(searchKey = '') {
			GetReceivingAddressList({ searchKey }).then(res => {
				if (res) {
					res.Data.forEach(item => {
						if (item.IsDefault) {
							this.address = item
						}
					})
					console.log(this.address)
				}
			})
		},
		showOpt(type) {
			console.log(type)
			if (this.detailIndex !== this.SpecIndex) {
				this.optPopup.data = this.productList[this.detailIndex]
			}
			this.optPopup.type = type
			this.optPopup.show = true
		},

		// 重置请求参数及数据
		resetParams() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 10
			this.scollRequest = true
			this.scollTop = 0
			this.end = false
			this.productList = []
		},
		// 点击分类事件
		treeClickEvent(item, treeItem) {
			console.log(item, '分类')
			if (this.activeId !== item.id) {
				this.activeId = item.id
				this.resetParams()
				this.requestData.typePath = item.parent_path
				this.GetWholeSaleListForSku()
			}
		},
		// 打开商品详情弹窗
		goDetailPage(item, index) {
			this.detailIndex = index
			const id = item.ID
			this.$router.push('/quickPlaceOrder/detail/' + item.ID)
			//if (id === this.oldID) {
			//  this.detailShow = true
			//} else {
			//  this.oldID = id
			//  this.GetCommentListByProduct(id)
			//  this.GetInintProductDetailInfo(id)
			//}
		},
		showSpec(item, index) {
			console.log(item)
			this.SpecIndex = index
			this.optPopup.type = 'attr'
			this.optPopup.data = item
			this.optPopup.show = true
		},
		updateCart(item) {
			const _obj = {}
			_obj.ProductId = item.ID
			_obj.Amount = item.Amount
			_obj.SkuId = item.ProductSkuList[0].ID
			this.cartRequestList = []
			this.cartRequestList.push(_obj)
			this.AddOrUpdateAmount()
		},
		changeAddress(address) {
			console.log(999)
			this.detailData.UserAddress = address
			// this.$forceUpdate()
		},

		// 规格弹窗组件方法
		addCart(arr) {
			console.log(arr)
			this.cartRequestList = arr
			if (this.cartRequestList.length <= 0) {
				this.$toast.fail('请选择商品')
				return
			}
			this.AddOrUpdateAmount()
		},
		closePopup() {
			this.optPopup.show = false
		},
		searchAdress() { },

		// 底部购物车组件方法
		cleanCart() {
			this.carList = []
			this.optPopup.change = !this.optPopup.change
			this.changeArr(this.productList, false)
		},
		carUpdateCart(bool) {
			if (bool) {
				this.GetUserCarList()
			} else {
				this.changeArr(this.productList, false)
			}
		},

		// 详情弹窗方法
		clickLeft() {
			this.detailShow = false
		},

		// 整理数据
		changeArr(Arr, isNew) {
			const _this = this
			console.log(this)
			Arr.forEach(item => {
				// 图片列表
				if (item.ImageUrl) {
					const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
					item.logo = ImgUrlList[0]
				}
				item.BaseUnit = item.DefaultUnit
				// 单位列表
				if (item.Unit && item.Unit.indexOf(',') !== -1) {
					item.UnitList = item.Unit.split(',')
					item.BaseUnit = item.UnitList[0]
				}
				// 换算比例列表
				if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
					item.UnitratioList = item.Unitratio.split(':')
				}
				// 按单限购
				if (item.ProductSkuList && item.ProductSkuList.length === 1) {
					item.oLimitBuy = item.ProductSkuList[0].LimitBuy
				}
				// 购物车数量（同步）
				if (_this.carList && _this.carList.length > 0) {
					const _list = _this.carList
					for (let i = 0; i < _list.length; i++) {
						if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
							if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
								for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
									if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
										for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
											if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
												item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
												console.log('匹配成功')
												break
											}
										}
									}
								}
							} else { // 单规格商品
								console.log('同步单规格')
								item.Amount = _list[i].Amount
								break
							}
						} else {
							item.Amount = 0
						}
					}
				} else {
					item.Amount = 0
					if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
						for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
							if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
								for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
									item.ProductSkuAttrList[j].SkuList[k].Amount = 0
								}
							}
						}
					}
				}
				if (isNew) {
					_this.productList.push(item)
				}
			})
		},

		// 滚动事件触发下拉加载
		onScroll() {
			const _this = this
			if (_this.scollRequest === true) {
				if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
					_this.scollRequest = false
					// alert('触发！！！')
					console.log('加载')
					_this.scollTop = this.$utils.getScrollTop('scrollBox')
					if (_this.requestData.PageIndex < _this.totalAmout) {
						_this.requestData.PageIndex++
						_this.GetWholeSaleListForSku()
					} else {
						console.log('end')
						_this.end = true
					}
					// }
				}
			}
		},

		// 获取门店商品分类列表
		GetProductTypeTree() {
			GetProductTypeTree({ InfoType: 1, parent_path: "_0_2_" }).then((res) => {
				if (res) {
					this.initClassify = false
					this.topClassify = res.Data.children;
					var Classifytotal = {
						OrderBy: res.Data.OrderBy,
						id: res.Data.id,
						name: '全部',
						parent_id: res.Data.parent_id,
						parent_path: res.Data.parent_path,
						type_id: res.Data.type_id,
						Icon: this.$webInfo.ShopLogo
					}
					this.topClassify.unshift(Classifytotal)
					if (this.classActive !== 0) {
						var index = 0
						for (var i = 0; i < this.topClassify.length; i++) {
							if (this.topClassify[i].id === this.classActive) {
								index = i
							}
						}
						this.classifyListFn(this.topClassify[index])
					} else {
						this.requestData.typePath = res.Data.parent_path
						this.productList = []
						this.GetWholeSaleListForSku()
					}

					// if (res.Data.children && res.Data.children.length > 0) {
					//   res.Data.children.forEach((item) => {
					//     this.classifyList.push(item)
					//   })
					// }
					// this.activeId = res.Data.id
					// this.requestData.type = res.Data.id
					// this.productList = []
					// this.GetWholeSaleListForSku()
				}
			})
		},
		classifyListFn(item) {
			this.classifyList = []
			const totalClassify = {
				OrderBy: item.OrderBy,
				id: item.id,
				name: '全部',
				parent_id: item.parent_id,
				parent_path: item.parent_path,
				type_id: item.type_id
			}
			console.log(item, '点击')
			this.classifyList.push(totalClassify)
			if (item.children && item.children.length > 0) {
				item.children.forEach((item) => {
					this.classifyList.push(item)
				})
			}
			console.log(item, "切换")
			this.activeId = item.id
			this.requestData.typePath = item.parent_path
			this.productList = []
			this.GetWholeSaleListForSku()
		},
		// 获取商品列表
		// 获取商品列表
		GetWholeSaleListForSku() {
			const _this = this
			GetWholeSaleListForSku(_this.requestData).then(res => {
				if (res) {
					if (res.Data.Data.length && res.Data.Data.length > 0) {
						console.log('购物车数据')
						console.log(_this.carList)
						console.log(res.Data.Data)
						this.changeArr(res.Data.Data, true)
						_this.totalAmout = res.Data.TotalAmout
						_this.scollRequest = true
						if (_this.scollTop > 0) {
							_this.$refs.scrollBox.scrollTo(0, _this.scollTop)
						}
					}
				}
			})
		},

		// 获取购物车列表
		GetUserCarList() {
			GetUserCarList({ priceType: 1 }).then(res => {
				if (res) {
					this.carList = res.Data
					if (this.initClassify) {
						this.GetProductTypeTree()
					} else if (this.updateList) {
						this.changeArr(this.productList, false)
					}
				}
			})
		},

		// 获取商品详情
		GetInintProductDetailInfo(id) {
			GetInintProductDetailInfo({ productId: id, InfoType: 1 }).then(res => {
				if (res) {
					this.detailData = res.Data
					this.detailData.imgList = res.Data.ProductInfo.ImageUrl.split(',')
					this.detailShow = true
				}
			})
		},

		// 更新购物车
		AddOrUpdateAmount() {
			AddOrUpdateAmount(this.cartRequestList).then(res => {
				if (res) {
					console.log(res)
					this.optPopup.show = false
					this.updateList = false
					this.GetUserCarList()
				}
			})
		},

		// 获取评价
		GetCommentListByProduct(id) {
			this.commentRequest.product_id = id
			GetCommentListByProduct(this.commentRequest).then(res => {
				if (res) {
					console.log(res)
					this.evaluateData = res.Data
				}
			})
		},

	}
}
</script>
<style lang="scss" scoped>
.color-white {
	/deep/.van-icon {
		color: #fff;
	}

	/deep/.van-nav-bar__title {
		color: #fff;
	}
}

.list-content {
	height: calc(100% - 270px);
}

// 以上修整完成
.scoll-y {
	overflow-y: scroll;
}

.classifyItem {
	width: 200px;
}

.activeIndex {
	background: $colorF;
	position: relative;

	&:before {
		content: '';
		height: calc(100% - 40px);
		width: 8px;
		@include bg-primary();
		position: absolute;
		top: 20px;
		left: 0;
		border-radius: 0 8px 8px 0;
	}
}

.van-popup {
	background: transparent;
}

.detail-page {
	background: $colorF5;
}

.tab-bar {
	display: flex;

	flex-direction: row;
	background: $colorF;
	padding: 20px 0;

	.tab-item {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.teb-item-text {
			display: flex;
			font-size: 26px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.teb-item-border {
			display: flex;
			width: 80px;
			height: 6px;
			border-radius: 3px;
			background: rgba($color: #000000, $alpha: 0);
		}
	}

	.activeBorder {
		.teb-item-text {
			@include color-primary;
		}

		.teb-item-border {
			@include bg-primary();
		}
	}
}

.filter-tab {
	display: flex;
	flex-direction: row;
	position: relative;
	padding: 10px 24px 20px;

	.filter-item {
		display: flex;
		flex-grow: 0;
		flex-shrink: 0;
		width: calc(33% - 15px);
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		height: 54px;
		background: $colorF4;
		border: solid 1px $colorF4;
	}

	.filter-checked {
		@include color-primary;
		background: $colorF;
		@include border-primary;
	}

	.filter-active {
		background: transparent;
		color: #000 !important;
		position: relative;
		@include border-primary;

		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			@include color-primary;
			@include bg-primary;
			opacity: 0.1;
			border-radius: 10px;
		}
	}

	.change-theme {
		background: $colorF;
		border: solid 1px #171817;
	}

	.filter-pop {
		position: absolute;
		z-index: $zIndexPopup;
		top: 84px;
		left: 0;
		width: 100%;
		height: calc(100vh - 370px);

		.filter-cover {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: $colorOverlay;
		}

		.filter-pop-content {
			position: relative;
			background: $colorF;

			.filter-pop-item-box {
				padding: 40px 24px 50px;
				position: relative;
				display: flex;
				flex-wrap: wrap;

				.filter-pop-item {
					flex-shrink: 0;
					flex-grow: 0;
					position: relative;
					width: calc(33.33% - 14px);
					margin-right: 20px;
					margin-bottom: 20px;
					text-align: center;
					line-height: 72px;
					padding: 0 20px;
					background: $colorF4;
					border: solid 1px $colorF4;
					border-radius: 6px;

					&:nth-child(3n) {
						margin-right: 0px;
					}
				}

				.filter-selected {
					@include color-primary;
					border-color: currentColor;

					&:before,
					&:after {
						content: '';
						position: absolute;
					}

					&:before {
						background: currentColor;
						width: 54px;
						height: 54px;
						border-radius: 100%;
						bottom: -27px;
						right: -27px;
					}

					&:after {
						width: 6px;
						height: 12px;
						border: 5px solid;
						border-color: transparent $colorF $colorF transparent;
						transform: rotate(45deg);
						bottom: 6px;
						right: 4px;
					}
				}
			}

			.filter-pop-item-box-1 {
				padding: 30px 24px 40px;
				font-size: 26px;

				.filter-pop-item-1 {
					padding: 30px 0;
				}

				.item-checked {
					position: relative;
					@include color-primary;

					&:after {
						content: '';
						position: absolute;
						width: 6px;
						height: 18px;
						border: 5px solid;
						border-color: transparent currentColor currentColor transparent;
						transform: rotate(45deg);
						bottom: 40px;
						right: 10px;
					}
				}
			}

			.filter-bottom {
				padding: 32px 24px;
				position: relative;

				.btn {
					width: calc(50% - 20px);
					line-height: 72px;
					border-radius: 8px;
				}
			}
		}
	}
}

.zIndexBottom {
	z-index: $zIndexHeader;
}

.nav-list--bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #fff;
	height: 120px;
	text-align: center;
	color: #666;
	font-size: 24px;
	border-top: 1px solid #dadada;
	display: flex;
}

.nav-item {
	position: relative;
	text-align: center;
	flex: 1;
}

.nav-list .nav-item a {
	height: 120px;
	padding-top: 70px;
	display: block;
	color: #666;
}

.nav-list--bottom .item-icon {
	top: 10px !important;
	width: 45px;
	height: 48px;
	line-height: 48px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0)
}

.has-bottom1 {
	padding-bottom: 120px;
}

.mapicon {
	width: 36px;
	height: 36px;
}

.topmain {
	height: 130px;
	padding: 16px 32px 0 32px;
	background: #fff;

}

.top_right {
	// width: 172px;
	height: 50px;
	background: rgba(63, 65, 86, 0.08);
	border-radius: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	span {
		color: #666;
		width: 76px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		white-space: nowrap;
	}

	.active {
		color: #fff;
		width: 96px;
		border-radius: 32px;
		padding: 0 24px;
	}
}

.delivery {
	.mapicon {
		width: 24px;
		height: 24px;
	}
}

.top_search {
	height: 90px;
	overflow: hidden;
}

.classImg {
	width: 96px;
	height: 96px;
	border-radius: 15px;
	border: 2px solid #FFFCFC;
	margin-bottom: 6px;
	overflow: hidden;
}

/deep/.van-tab--active {
	font-weight: bold;
}

/deep/.van-tabs__line {
	display: none;
}

/deep/.van-tabs__wrap {
	height: 75px;
	padding-right: 20px;
}

/deep/.van-tab {
	text-align: center;
}

.scrollClass {
	padding-top: 10px;
	position: relative;
	background: #fff;
	box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.07);

	.clickMore {
		position: absolute;
		width: 66px;
		height: 100%;
		top: 0;
		right: 0;
		background: #fff;
		display: flex;
		font-weight: bold;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.fs-title {
		width: 96px;
	}
}

.flxedClassify {
	background: #fff;

	.topClassify {
		display: flex;
		justify-content: flex-start;
		height: 154px;
		background: #FFFCFC;
		padding: 0 0px 0 8px;

		div {
			color: #666666;
			font-size: 24px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			margin: 0 22px;

			.classImg {
				width: 96px;
				height: 96px;
				border-radius: 30px;
				border: 2px solid #FFFCFC;
				margin-bottom: 6px;
			}
		}

		.active {
			.classImg {
				@include border-primary;
			}

			span {
				@include color-primary;
				font-weight: bold;
			}

		}

		&>div:last-child {
			padding-right: 106px !important;
		}
	}

	.topClassifyPop {
		height: auto;
		flex-wrap: wrap;

		div {
			margin-bottom: 24px;
		}

		&>div:last-child {
			padding-right: 0px !important;
		}
	}

	.title {
		padding: 30px 40px 30px 40px;
		font-weight: bold;
	}

	.flxedbottom {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 24px;
	}
}
</style>
